<!--suppress ALL -->
<script setup>
import { ref,onMounted } from 'vue'
import {accounting, accountOne} from "@/api/finance.js";

const tableData = ref([])

const tableRef = ref(null)

const oneData = ref([])

const oneRef = ref(null)

const searchQuery = ref(null)

const size = ref('default')
const background = ref(false)
const disabled = ref(false)

//第几页
const currentPage = ref(1)
//每页条数
const pageSize = ref(15)
//总页数
const pages = ref(null)
//总条数
const total = ref(null)

const handleSizeChange =async (newSize) => {
  pageSize.value=newSize
  currentPage.value=1
  await initTableData()
}

const handleCurrentChange =async (newSize) => {
  currentPage.value=newSize
  await initTableData()
}

const search =async ()=> {
  if (searchQuery.value!==null){
    currentPage.value = 1
  }
  await initTableData()
  await initOneData()
}

const initTableData = async ()=>{
    let id
    if (searchQuery.value!==null&&searchQuery.value!==""){
      id=searchQuery.value;
    }else {
      id=-1;
    }
    const heSua = await accounting(id,currentPage.value,pageSize.value)
    if (heSua.data.data.attendances!==null){
      tableData.value = heSua.data.data.attendances.records;
      pageSize.value = heSua.data.data.attendances.size
      currentPage.value = heSua.data.data.attendances.current
      total.value = heSua.data.data.attendances.total
      pages.value = heSua.data.data.attendances.pages
    }
}

const initOneData = async ()=>{
  let id
  if (searchQuery.value){
    id=searchQuery.value
    const heSua = await accountOne(id)
    if (heSua.data.data!==null){
      oneData.value = heSua.data.data.userSalary
    }
  }
}

onMounted(()=>{
   initTableData()
});
</script>

<template>
    <el-row :gutter="20">
      <el-col :span="6" class="sou">
        <el-input
            type="text"
            placeholder="请输入员工号并回车"
            v-model="searchQuery"
            @input="search"
            suffix-icon="Search"
        />
      </el-col>
    </el-row>
    <el-table :ref="tableRef" :data="tableData" style="width: 100%">
      <el-table-column fixed prop="userid" label="员工号" width="180" />
      <el-table-column fixed prop="username" label="员工姓名" width="180" />
      <el-table-column prop="dayTime" label="日期" width="200" />
      <el-table-column prop="importContent" label="缺卡记录" width="200" />
      <el-table-column fixed="right" prop="salaryDeduction" label="扣款（元）" width="200" />
    </el-table>
    <div class="demo-pagination-block">
    <!-- 分页查询 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[15, 20, 25, 30]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style>
.demo-pagination-block{
  width: 100%;
}
.sou{
  padding-top: 10px;
}
</style>
  
 
  